<template>
	<view class="zh-u-input display-flex justify-between align-center" :class="{'border-bottom':props.border}">
		<view class="left flex display-flex align-center">
			<view class="title" v-if="props.title" :style="titleStyle">
				<text>{{ props.title }}</text>
				<text v-if="getRequired === true" class="red ml-10">*</text>
			</view>
			<text v-if="readonly" class="flex">{{ message }}</text>
			<input v-else class="input flex" :type="props.type" :focus="focus" :password="props.password" :placeholder="props.placeholder" v-model="message" @input="onInput" @blur="onBlur" @focus="onfocus"/>
		</view>
		<view class="right">
			<slot name="icon"></slot>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, watch, computed, nextTick, reactive } from 'vue'
	import { util, tip } from '@/utils'
	
	const message:any = ref('')
	const focus:any = ref(false)
	const emit = defineEmits(['update:modelValue'])
	const props = withDefaults(defineProps<{
		title?: string
		border?: boolean
		placeholder?: string
		password?: boolean
		digit?:number
		rules?:any
		modelValue:any
		labelWidth?:string
		readonly?:boolean
		type?:string
	}>(), {
		border:true,
		password:false,
		type:'text'
		//width:'160'
	})
	const titleStyle = reactive({
		width:uni.upx2px(Number(props.labelWidth)) + 'px'
	})
	
	message.value = props.modelValue
	watch(() => props.modelValue, () => message.value = props.modelValue)
	
	const getRequired = computed(() => {
		if(props.rules) {
			for(let i in props.rules) {
				if(props.rules[i].required === true) {
					return true
				}
			}
		}
		return false
	})
	
	const onInput = (e: any) => {
		let value = ''
		//#ifdef MP-WEIXIN
		value = e.target.value
		//#endif
		//#ifdef APP-PLUS
		value = e.detail.value
		if(props.type === 'digit') {
			if(Number(value) < 0 || value === '-0') {
				value = Math.abs(Number(value)).toString()
			}
			value=(value+'').replace(/^0+\./g,'0.')
			value.match(/^0+[0-9]+/)?value=value.replace(/^0+/g,''):value
			
			nextTick(() => {
				message.value = value
			})
		}
		//#endif
		if(props.digit) {
			value = util.inputDigit(value, props.digit)
			nextTick(() => {
				message.value = value
			})
		}
		if(props.rules) {
			props.rules.map((item:any) => {
				if(item.max && value > item.max) {
					tip.showToast(item.message)
				}
			})	
		}
		emit('update:modelValue', value)
	}
	
	const onBlur = (e:any) => {
		let value = ''
		//#ifdef APP-PLUS
		uni.hideKeyboard()
		focus.value = false
		value = e.detail.value
		//#endif
		//#ifdef MP-WEIXIN
		value = e.target.value
		//#endif
		if(props.rules) {
			props.rules.map((item:any) => {
				if(item.required === true && !value && value != '0') {
					tip.showToast(item.message)
				}
				if(item.pattern) {
					if(!item.pattern.test(value)) {
						tip.showToast(item.message)
					}
				}
			})	
		}
	}
	
	const onfocus = () => {
		//#ifdef APP-PLUS
		nextTick(() => {
			focus.value = true
		})
		//#endif
	}
	
</script>

<style lang="scss" scoped>
	.zh-u-input {
		padding: 40rpx 0;
		.left {
			.title {
				//width: 160rpx;
				font-weight:bold;
				font-size:$uni-font-size-base;
				color:$uni-text-color-light-black;
				display:inline-block;
				.red {
					color:#ff0000;
				}
			}
			.input {
				//width:100%;
				font-size: $uni-font-size-26;
				display:inline-block;
			}	
		}
		.right {
			margin-left:30rpx;
		}
		&.border-bottom {
			border-bottom:1rpx solid $uni-border-color;
		}
	}
</style>